<script setup>
import { Edit, Delete } from "@element-plus/icons-vue";
import { ref } from "vue";
const categorys = ref([]);
import {
	getArticleCategoryService,
	addCategoryService,
	modifyCategoryService,
	deleteCategoryService,
} from "@/api/article.js";

//控制添加分类弹窗
const dialogVisible = ref(false);

//弹窗标题
const title = ref("");

//添加分类数据模型
const categoryModel = ref({
	categoryName: "",
	categoryAlias: "",
});
//添加分类表单校验
const rules = {
	categoryName: [
		{ required: true, message: "请输入分类名称", trigger: "blur" },
	],
	categoryAlias: [
		{ required: true, message: "请输入分类别名", trigger: "blur" },
	],
};
//成功提示
import { ElMessage, ElMessageBox } from "element-plus";
const successMessage = (successMessage) => {
	ElMessage({
		message: successMessage,
		type: "success",
	});
};
//添加文章分类
const addCategory = async () => {
	let result = await addCategoryService(categoryModel.value);
	successMessage("添加成功！");
	getArticleCategory();
	dialogVisible.value = false;
};

//获取分类列表函数
const getArticleCategory = async () => {
	let result = await getArticleCategoryService();
	categorys.value = result.data;
};
//编辑按钮事件函数
const editClick = (row) => {
	title.value = "编辑分类";
	dialogVisible.value = true;
	categoryModel.value.categoryName = row.categoryName;
	categoryModel.value.categoryAlias = row.categoryAlias;
	categoryModel.value.id = row.id;
};
//添加分类事件函数
const addCategoryClick = () => {
	title.value = "添加分类";
	dialogVisible.value = true;
	categoryModel.value = {
		categoryName: "",
		categoryAlias: "",
	};
};

const modifyCategory = async () => {
	let result = await modifyCategoryService(categoryModel.value);
	successMessage("修改成功！");
	getArticleCategory();
	dialogVisible.value = false;
};
//弹窗表单点击确认事件函数
const confirmClick = () => {
	if (title.value === "添加分类") {
		addCategory();
	} else {
		modifyCategory();
	}
};
// 删除分类
const deleteCategory = async (row) => {
	let result = await deleteCategoryService(row.id);
	getArticleCategory();
	successMessage("删除成功！");
};

//删除分类  给删除按钮绑定事件
const deleteCategoryClick = (row) => {
	ElMessageBox.confirm("你确认删除该分类信息吗？", "温馨提示", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => {
			deleteCategory(row);
		})
		.catch(() => {
			//用户点击了取消
			ElMessage({
				type: "info",
				message: "取消删除",
			});
		});
};

//执行获取分类列表
getArticleCategory();
</script>
<template>
	<el-card class="page-container">
		<template #header>
			<div class="header">
				<span>文章分类</span>
				<div class="extra">
					<el-button type="primary" @click="addCategoryClick"
						>添加分类</el-button
					>
				</div>
			</div>
		</template>
		<el-table :data="categorys" style="width: 100%">
			<el-table-column label="序号" width="100" type="index"> </el-table-column>
			<el-table-column label="分类名称" prop="categoryName"></el-table-column>
			<el-table-column label="分类别名" prop="categoryAlias"></el-table-column>
			<el-table-column label="操作" width="100">
				<template #default="{ row }">
					<el-button
						:icon="Edit"
						circle
						plain
						type="primary"
						@click="editClick(row)"></el-button>
					<el-button
						:icon="Delete"
						circle
						plain
						type="danger"
						@click="deleteCategoryClick(row)"></el-button>
				</template>
			</el-table-column>
			<template #empty>
				<el-empty description="没有数据" />
			</template>
		</el-table>
		<!-- 添加分类弹窗 -->
		<el-dialog v-model="dialogVisible" :title="title" width="30%">
			<el-form
				:model="categoryModel"
				:rules="rules"
				label-width="100px"
				style="padding-right: 30px">
				<el-form-item label="分类名称" prop="categoryName">
					<el-input
						v-model="categoryModel.categoryName"
						minlength="1"
						maxlength="10"></el-input>
				</el-form-item>
				<el-form-item label="分类别名" prop="categoryAlias">
					<el-input
						v-model="categoryModel.categoryAlias"
						minlength="1"
						maxlength="15"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="confirmClick"> 确认 </el-button>
				</span>
			</template>
		</el-dialog>
	</el-card>
</template>

<style lang="scss" scoped>
.page-container {
	min-height: 100%;
	box-sizing: border-box;

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
</style>
